
<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <!-- 头部左边 -->
        <div class="headd">
          <img class="logo" src="/img/logo.png" alt="">


        </div>
        <div class="headerLeft">
          <span class="circle iconfont icon-anniu_jiantouxiangzuo" :class="flag?'':'zhuan'" @click="change" ></span>
          <MainNav @select="secondNav" />
        </div>

        <!-- 头部右边 -->
        <div class="headerRight">
          <!-- 头像图片 -->
          <div>
            <img src="./views/Login/images/1.jpg" alt="" />
          </div>

          <div id="exit">
            <el-dropdown>
              <p class="op"> 
                  {{ user.userInfo.empUserName }}
                <span class="iconfont icon-xiala"></span>
              </p>

              <!-- 退出弹框 -->
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    ><span class="iconfont icon-logout"></span
                    >修改密码</el-dropdown-item
                  >
                  <el-dropdown-item @click="exitLogin"
                    ><span class="iconfont icon-logout"></span
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container class="container" :style="{height:scrollHeight}">
        <el-aside class="aside" :class='{"on":flag,"close":!flag}' width="200px"><SecondNav :selected="selected" /> </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { computed, onBeforeMount, onMounted, onUpdated, ref } from "vue";
import MainNav from "@/components/Nav/MainNav.vue";
import SecondNav from "@/components/Nav/SecondNav.vue";
import axios from "@/utils/http";
import { useStore, mapMutations, mapGetters } from "vuex";
import router from "./router";
import { ElMessage } from "element-plus";

export default {
  components: {
    MainNav,
    SecondNav,
  },
  setup() {
    
    
    const scrollHeight = computed(()=>(window.innerHeight-60)+"px")
    const flag = ref(true)
    const change = ()=>{
      flag.value = !flag.value
    }
    const selected = ref();
    const secondNav = (data: any) => {
      selected.value = data.first;
    };

    /* ———————————————————— 退出功能 ———————————————————— */
    let exitLogin = () => {
      //点击退出 发起请求  注销用户
      axios({
        url: "/login/logOut",
        method: "post",
      })
        .then((res) => {

          //判断状态码 200 退出成功
          if (res.data.code == 200) {
            //状态码为200 ，成功
            ElMessage({
              message: "退出成功",
              type: "success",
            })
      
          } else {
            //状态码 不等于200
            ElMessage.error("退出失败");
            
          }
          router.push("/");
          sessionStorage.removeItem("loginUser")
            sessionStorage.removeItem("current_authorization");
            sessionStorage.removeItem("refresh_authorization");
        })
        .catch((err) => {
          console.log(err);
          ElMessage.error("退出失败");
          router.push("/");
          sessionStorage.removeItem("loginUser")
            sessionStorage.removeItem("current_authorization");
            sessionStorage.removeItem("refresh_authorization");
        });
    };

    /* ———————————————————— 获取用户信息 ———————————————————— */
    //退出登录，发请求
    const store = useStore();
    const user  = computed(mapGetters(["getUser"]).getUser.bind({
  $store: store,
}))
    onUpdated(() => {
      if(!sessionStorage.getItem("loginUser")){
        router.push("/");
      }
    });
    
    
    // onUpdated( ()=>{
    //   console.log('-----------');

    // })

    /* ———————————————————— 暴露出去 ———————————————————— */
    return {
      secondNav,
      selected,
      exitLogin,
      onBeforeMount,
      store,
      flag,
      change,
      scrollHeight,
      user
    };
  },
};
</script>

<style lang="less" scoped>
body{
  margin: 0;
}
* {
  margin: 0;
  padding: 0;
}

.container{
}

/* 头部  尾部 */

.zhuan{
  transform: rotate(-180deg);
}

.header {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  background-color: white;
  color: #333;
  width: 100%;
  line-height: 60px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 10;
  // border-bottom: 3px solid #e7e9eb;
  -webkit-box-shadow: 1px 2px 3px rgb(0 0 0 / 10%);
    box-shadow: 1px 2px 3px rgb(0 0 0 / 10%);
}
.aside{
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 9;
  transition: all .4s ease-in-out;
}
.logo{
  width: 40px;
  height: 40px;
}
.headd{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  width: 200px;
}
.on{width: 200px;}
.close{width: 0px;}

/* 头部左边列表 */
.headerLeft {
  display: flex;
  height: 60px;
  width: 60%;
  /* border: 1px solid blue; */
}

/* 头部右边头像 */
.headerRight {
  display: flex;
  width: 15%;
  /* border: 1px solid blue; */
  height: 50px;
  line-height: 50px;
}

.headerRight > div:nth-of-type(1) {
  width: 50px;
  height: 50px;
  /*  ; */
  float: left;
  margin: 0 20px;
  border-radius: 25px;
}

.headerRight > div > img {
  width: 100%;
  height: 100%;
  border-radius: 25px;
}

.headerRight > p {
  width: 120px;
  height: 50px;
  /*  ; */
  float: right;
  font-size: 20px;
}

.icon-xiala {
  font-size: 28px;
}

/* 下拉框  */
.iconfont {
  color: black;
}

/* 退出弹框 */
#exit {
  width: 120px;
  height: 50px;
  /*  ; */
  float: right;
  position: absolute;
  top: 0px;
  right: 10px;
}

.op {
  font-size: 20px;
  line-height: 50px;
}
.headerLeft > .iconfont{
  font-size: 40px;
  color: #2b333e;
  transition: .5s all linear;
}
.icon-logout {
  font-weight: bold;
  color: black;
}

/* 左边列表 */
.el-aside {
  background-color: #2b333e;
  color: white;
  text-align: center;
  line-height: 80px;
}


/* 列表内容 */
.el-main {
  background-color: #f3f5f8;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>